<template>
  <div class="user-page-wrapper">
    <div class="user-info">
      <author-base-info
        class="author-base-info"
        :author="author_info"
        @follow="follow"
      ></author-base-info>

      <author-data-info
        class="user-data-info"
        :author="author_info"
      ></author-data-info>
    </div>

    <router-view class="author-works"></router-view>

    <div class="user-help-cards">
      <img src="@/assets/image/ad3.png" alt="Ad3" />
      <div class="authority">
        <p>ToKnow</p>
        <p>Copyright © 2022.ToKnow All rights reserved.</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import AuthorBaseInfo from './profile/AuthorBaseInfo.vue'
import AuthorDataInfo from './profile/AuthorDataInfo.vue'
import { post } from '@/utils/request'
import { show } from '@/utils/popup'
import { useUserStore } from '@/store/user'
import { useRoute } from 'vue-router'

let id = ref('')
let info = reactive({} as App.Author)

function fetchAuthorInfo() {
  post('author/info', {
    id: id.value,
  })
    .then((res) => {
      info = res.data as App.Author
      info.workNum = info.articleNum + info.sourceNum
    })
    .catch(() => {
      show('获取作者信息失败')
    })
}

const userStore = useUserStore()
function follow() {
  post('author/follow', {
    id: id.value,
  })
    .then(() => {
      info.isFollow = !info.isFollow
      userStore.fetchUserInfos()
    })
    .catch(() => {
      show('关注失败')
    })
}

const route = useRoute()
onMounted(() => {
  let params = route.params
  id.value = params.id as string
  fetchAuthorInfo()
})
</script>

<style scoped lang="scss">
.user-page-wrapper {
  width: var(--innerWidth);
  margin: 0 auto;
  height: 900px;

  .user-bg {
    width: 100%;
  }

  .user-info {
    --h: 80px;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .author-base-info {
      --authorBaseInfoWidth: var(--innerWidthPart1);
      --authorBaseInfoHeight: 120px;
    }

    .user-data-info {
      --userDataInfoWidth: var(--innerWidthPart2);
      --userDataInfoHeight: 120px;
    }
  }

  .author-works,
  .user-help-cards {
    margin-top: 10px;
  }

  .author-works {
    --authorWorksWidth: var(--innerWidthPart1);
    float: left;
    background-color: white;
  }

  .user-help-cards {
    float: right;
    width: var(--innerWidthPart2);
    min-height: 200px;

    img {
      width: 100%;
    }

    .authority {
      box-sizing: border-box;
      float: right;
      width: var(--w2);
      height: 100px;
      // background-color: skyblue;
      color: var(--dark);
      font-size: 14px;
      padding: 10px;
    }
  }
}
</style>
